<script setup>
import { ref } from 'vue'
import TabBar from './components/TabBar.vue'
import TabBarItem from './components/TabBarItem.vue'

import HomeView from './views/HomeView.vue'
import CateView from './views/CateView.vue'
import CartView from './views/CartView.vue'
import UserView from './views/UserView.vue'

const active = ref(0)

const views = [HomeView, CateView, CartView, UserView]

// const handleUpdate = (index) => {
//   active.value = index
// }
</script>

<template>
  <!-- 内置组件, 有一个is属性, 用于指定渲染哪个组件 -->
  <component :is="views[active]"></component>
  <TabBar v-model="active">
    <TabBarItem icon="home">首页</TabBarItem>
    <TabBarItem icon="category">分类</TabBarItem>
    <TabBarItem icon="cart">购物车</TabBarItem>
    <TabBarItem icon="user">我的</TabBarItem>
  </TabBar>
</template>

<style></style>
